<template>
  <div>
    <p class="title">角色列表</p>
    <div class="search-box">
      <div>
        <label>状态：</label>
        <el-select v-model="value" size="small" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" size="small" @click="toAdd">新建</el-button>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark">

      <el-table-column label="序号" width="80" type="index"></el-table-column>
      <el-table-column prop="activeNum" label="角色名称">

      </el-table-column>
      <el-table-column prop="activeName" label="描述">
      </el-table-column>

      <el-table-column prop="applyTime" label="状态">
      </el-table-column>
      <el-table-column prop="activeTime" label="操作">
        <template slot-scope="scope">
          <el-button @click="toEdit" type="text" size="small">编辑</el-button>

          <el-button type="text" size="small">禁用</el-button>

        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        form: {},
        options: [{ value: 1, label: "禁用" }, { value: 1, label: "启用" }],
        currentPage: 1,
        tableData: [
          {
            num: "1",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1518 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
          {
            num: "2",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1517 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
          {
            num: "3",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1519 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
          {
            num: "4",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1516 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
        ],

      };
    },

    methods: {
      toEdit() {
        this.$router.push({ path: '/Home/RoleInfo' })
      }

    },
  };
</script>

<style lang="scss" scoped>
  .search-box {
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>